<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
    /*
        初始化阶段：由ReactDOM.render()触发---初次渲染
            1.constructor()
            2.componentWillMount()
            3.render()
            4.⭐componentDidMount()     //常用，一般在钩子里面做一些初始化的事情，开启定时器、发送网络请求、订阅消息
        更新阶段:由组件内部的this.setState()或父组件重新render触发(forceUpdate)
            1.shouldComponentUpdate()
            2.componentWillUpdate()
            3.⭐render()                //常用
            4.compentDidUpdate()
        卸载组件:由ReactDOM.unmountComponentAtNode()触发
            1.⭐componentWillUnmount()  //常用，一般做收尾的事情，关闭定时器、取消订阅消息
    */ 
        class Test extends React.Component {
            // 构造器
            constructor(props) {
                console.log('count------constructor')
                super(props)
            }
            // 初始化状态
            state = {count:0}
            add = ()=>{
                let {count} = this.state
                count++
                this.setState({count})
            }
            upDate = ()=>{
                this.forceUpdate()
            }
            remove = ()=>{
                ReactDom.unmountComponentAtNode(document.getElementById('test'))
            }
            // 组件将要挂载的钩子
            componentWillMount(){
                console.log('count------compnentWillMount')
            }
            // 组件挂载完毕的钩子
            componentDidMount(){
                console.log('count------compentDidMount')
            }
            /*
                使用setState()的时候，会执行阀门、执行将要更新、执行更新完成
                使用forceUpdate()的时候，会执行将要更新、更新完成               //forceUpdate强制更新，不更改状态强制更新内容,无论阀门是否开启
            */ 
            // 控制组件更新的阀门的钩子
            // 返回值为true的话可以通过，返回值为false的话不可以通过，如果没写默认帮你写为true
            shouldComponentUpdate(){
                console.log('count------shouldComponentUpdate')
                return true
            }
            // 组件将要更新的钩子
            componentWillUpdate(){
                console.log('count------compoentWillUpdate')
            }
            // 组件更新完成后的钩子
            componentDidUpdate(){
                console.log('count------componentDidUpdate')
            }
            // 组件卸载的钩子
            componentWillUnmount(){
                console.log('count------componentWillUnmount')
            }
            render() { 
                console.log('count------render')
                const {count} = this.state
                return  (
                    <div>
                        <h2>当前求和为{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.upDate}>组件强制更新</button>
                        <button onClick={this.remove}>卸载组件</button>
                    </div>
                )
            }
        }
        // 父组件A
        class A extends React.Component {
            state = {carName:'红旗'}
            changeCar = ()=>{
                this.setState({carName:'大众'})
            }
            render() {
                const {carName} = this.state
                return (
                    <div>
                    <div>{carName}</div>
                    <button onClick={this.changeCar}>换车</button>  
                    <B carName={carName}/> 
                    </div>

                )
            }
        }
        // 子组件B
        class B extends React.Component {
            // 组件将要接受新的props的钩子
            componentWillReceiveProps(props){
                console.log('B------componentWillReceiveProps',props)
            }
            // 控制数据是否更新的阀门
            shouldComponentUpdate(){
                console.log('B------shouldComponentUpdate')
                return true
            }
            // 数据即将更新之前
            componentWillUpdate(){
                console.log('B------componentWillUpdate')
            }
            // 数据更新完成之后
            componentDidUpdate(){
                console.log('B-----componentDidUpdate')
            }
            render() {
                console.log('B-----render')
                const {carName} = this.props
                return (
                    <div>接受到的车是{carName}</div>
                )
            }
        }
        ReactDOM.render(<A />, document.getElementById("test"))
    </script>
</body>
</html>